<template>
  <div class="layout">
    <div>
      <el-container style="border: 1px solid #eee">
        <!-- 顶部 -->
        <el-header style="text-align: right; font-size: 12px" class="header">
          <img src="../assets/image/2217logo3.png" alt="" width="200" height="60" />
          <el-menu
            :default-active="$route.meta.type"
            :mode="userAgent ? 'vertical' : 'horizontal'"
            style="background: #fff; padding: 0 10px 0 210px"
            :show-timeout="0"
          >
            <el-menu-item index="home" @click="selectAdmin(99, 'pandect')">总览</el-menu-item>
            <el-menu-item index="operate" @click="selectAdmin(0, 'manage')">运营后台</el-menu-item>
            <!-- market -->
            <el-menu-item index="market" @click="selectAdmin(1, 'manage')">市场后台</el-menu-item>
            <!-- customerService -->
            <el-menu-item index="customerService" @click="selectAdmin(2, 'manage')">客服后台</el-menu-item>
            <!-- design -->
            <el-menu-item index="design" @click="selectAdmin(3, 'manage')">设计后台</el-menu-item>

            <!-- 右侧登录账号信息 -->
            <el-menu-item style="float: right">
              <template slot="title">
                <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link"> {{ `hello, ${username}` }}<i class="el-icon-arrow-down el-icon--right"></i> </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-setting mr5" command="1">修改密码</el-dropdown-item>
                    <el-dropdown-item icon="icon aliiconfont el-icon-alituichudenglu mr5" command="2">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-menu-item>
          </el-menu>
        </el-header>

        <!-- Layout 后台子项目 -->
        <el-container class="container mt60">
          <transition name="fade">
            <el-aside width="200px" v-show="$route.meta.type != 'home'">
              <el-menu class="sub-item" router :default-active="$route.path" mode="vertical" :show-timeout="0">
                <!-- 运营 -->
                <div v-show="$route.meta.type == 'operate'">

                  <!--<el-submenu index="/operate" v-if="!userAgent">-->
                    <!--<template slot="title"> 数据中心 </template>-->
                    <!--<el-menu-item index="/dashbord">dashbord</el-menu-item>-->
                  <!--</el-submenu>-->

                  <el-submenu index="/operate" v-if="!userAgent">
                    <template slot="title"> 游戏管理 </template>
                    <el-menu-item index="/gameList">游戏列表</el-menu-item>
                    <el-menu-item index="/researchList">研发列表</el-menu-item>
                  </el-submenu>

                  <el-submenu index="11" v-if="!userAgent">
                    <template slot="title"> 服务器管理 </template>
                    <el-menu-item index="/serverList">服务器列表</el-menu-item>
                    <el-menu-item index="/serverMerge">服务器合并</el-menu-item>
                  </el-submenu>
                </div>

                <!-- 市场 -->
                <!-- 市场数据 -->
                <div v-show="$route.meta.type == 'market'">
                  <el-menu-item index="/channelroi" style="padding: 0 20px !important">
                    <template slot>
                      <div>
                        <span slot="title">SEM回报数据</span>
                      </div>
                    </template>
                  </el-menu-item>

                  <el-submenu index="pandect" v-if="!userAgent">
                    <template slot="title"> SEM总览 </template>
                    <el-menu-item index="/pandect">SEM总览</el-menu-item>
                  </el-submenu>

                  <el-submenu index="ldy" v-if="!userAgent">
                    <template slot="title"> 落地页 </template>
                    <el-menu-item index="/ldyList-mk">落地页列表</el-menu-item>
                  </el-submenu>

                  <el-submenu index="20" v-if="!userAgent">
                    <template slot="title">渠道管理 </template>
                    <el-menu-item index="/newChannel">新增渠道</el-menu-item>
                  </el-submenu>

                  <el-submenu index="21" v-if="!userAgent">
                    <template slot="title">附页管理 </template>
                    <el-menu-item index="/fyList-mk">附页列表</el-menu-item>
                    <el-menu-item index="/fy11Admin" v-if="false">fy11管理</el-menu-item>
                  </el-submenu>

                  <el-submenu index="22" v-if="!userAgent">
                    <template slot="title">渠道数据</template>
                    <el-menu-item index="/cid"> 渠道详情 </el-menu-item>
                    <el-menu-item index="/ccid"> 子渠道详情 </el-menu-item>
                  </el-submenu>
                </div>

                <!-- 客服 -->
                <div v-show="$route.meta.type == 'customerService'">
                  <el-submenu index="3" v-if="!userAgent">
                    <template slot="title">
                      <!-- <i class="icon aliiconfont el-icon-aliicon_meeting_fill"></i> -->
                      工单
                    </template>
                    <el-menu-item index="/oderList">工单列表</el-menu-item>
                    <el-menu-item index="/oderType">工单类型</el-menu-item>
                  </el-submenu>
                </div>

                <!-- design -->
                <div v-show="$route.meta.type == 'design'">
                  <el-submenu index="ldy">
                    <template slot="title">DIY落地页 </template>
                    <el-menu-item index="/ldyList">模板列表</el-menu-item>
                    <el-menu-item index="/addLdy">添加模板</el-menu-item>
                    <el-menu-item index="/modifyLdy">修改模板</el-menu-item>
                    <!--<el-menu-item index="/ldyView">模板预览</el-menu-item>-->
                  </el-submenu>

                  <el-submenu index="21">
                    <template slot="title">附页管理 </template>
                    <el-menu-item index="/fyList">附页列表</el-menu-item>
                    <el-menu-item index="/fy11Admin" v-if="false">fy11管理</el-menu-item>
                  </el-submenu>
                </div>
              </el-menu>
            </el-aside>
          </transition>
          <!-- 内容主体 -->
          <el-main>
            <!-- <transition name="fade"> -->
            <router-view></router-view>
            <!-- </transition> -->
          </el-main>
        </el-container>
      </el-container>

      <!-- 密码修改弹窗 -->
      <el-dialog :modal-append-to-body="false" :top="userAgent ? '60px' : '15vh'" title="修改密码" :visible.sync="dialogVisible">
        <el-form ref="form" label-width="80px">
          <el-form-item label="新密码">
            <el-input v-model.trim="newPassword" class="wid-90"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="editPassword" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: 'layout',
  data() {
    return {
      newPassword: '',
      loading: false,
      dialogVisible: false,
      dialogVisible1: false,
      tableData: [],
      role: localStorage.getItem('role'),
      user_name: localStorage.getItem('user_name'),
      id: localStorage.getItem('user_id'),
      // 角色主权限是什么，对应的位置就为true 依次为：运营、市场、客服
      systemFlag: [true, false, false, false],
      title: '2217后台管理系统',
      activeIndex: '1',
      navFlag: false,
    };
  },
  watch: {
    $route(r) {},
  },
  created() {},
  methods: {
    //  选择后台
    selectAdmin(index) {
      switch (index) {
        case 0:
          this.$router.push('gameList');
          break;
        case 1:
          this.$router.push('channelroi');
          break;
        case 2:
          this.$router.push('oderList');
          break;
        case 3:
          this.$router.push('ldyList');
          break;
        default:
          this.$router.push('/');
          break;
      }
    },
    handleCommand(command) {
      if (command == 1) {
        this.dialogVisible = true;
      } else {
        this.logout();
      }
    },
    editPassword() {
      if (!this.newPassword || this.newPassword.length < 6) {
        this.$message.warning('新密码不存在或者长度不能少于6位');
        return false;
      }
      this.$message.warning('暂不支持此操作');
      this.dialogVisible = false;
    },
    getFresh() {
      this.$store.dispatch('fresh');
    },
    logout() {
      this.$confirm('确认退出当前账号?').then(() => {
        localStorage.clear();
        this.$store.commit('userInfo', {});
        this.$router.replace('/login');
      });
    },
    // 获取 getSwitch
    changeFnc(o) {
      let self = this;
      this.$confirm('确认切换账号?').then(() => {
        this.$api
          .getSwitch({
            params: {
              login_user_id: o.id,
            },
          })
          .then(res => {
            localStorage.setItem('token', res.token);
            localStorage.setItem('user_id', res.user_id);
            localStorage.setItem('role', res.role);
            localStorage.setItem('user_name', res.username);

            location.reload();
          });
      });
    },
  },
  computed: {
    username() {
      return localStorage.getItem('user_name');
    },
  },
};
</script>
<style lang="stylus" scoped>
.isMobile {
  position: absolute;
  z-index: 999;
  background: #fff;
  height: 0px;
}

.el-header {
  position: fixed;
  width: 99%;
  line-height: 60px;
  z-index: 666;
  padding: 0 !important;

  img {
    position: fixed;
    z-index: 777;
    left: 8px;
  }
}

.el-aside {
  color: #333;
}

.el-menu-item {
  position: relative;
}

.header {
  .el-menu-item {
    font-size: 18px;
  }
}

.sub-item {
  .el-menu-item {
    padding: 0 30px !important;
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>
